<extend name="Public:mainbase" />
<block name="content">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/dhtmlxtree.css"/>
    <script language="javascript" src="__PUBLIC__/js/member.js?{:time()}"></script>
    <script language="javascript" src="__PUBLIC__/js/Validform_v5.3.2_min.js?{:time()}"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/webUploader/webuploader.css">
    <script type="text/javascript" src="__PUBLIC__/webUploader/webuploader.min.js"></script>
    <style type="text/css">
        .Validform_checktip{line-height: 34px}
		.table>tbody>tr>td{vertical-align: middle;}
        .fileList,.filePicker{margin-left: 40px;width: 80%}
    </style>
    <!--  内容列表   -->
    <form name="form2" method="post">
        <table width="98%" class="table table-bordered  table-hover table-condensed "  align="center">
       		 <tr bgcolor="#E7E7E7" >
				<td height="28" colspan="11" background="__PUBLIC__/images/tbg.gif" style="padding-left:10px;">
				◆ 专题 &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target=".newspecialbox"><i class="glyphicon glyphicon-plus"></i> 添加专题</button>
				</td>
			</tr>
            <tr bgcolor="#E7E7E7" >
                <td height="28" colspan="11" background="__PUBLIC__/images/tbg.gif" style="padding-left:10px;">
                    ◆ 专题列表
                </td>
            </tr>
            <tr align="center" bgcolor="#FBFCE2" height="25">
                <td width="4%">选择</td>
				<td width="10%">专题ID</td>
				<td width="180">缩略图</td>
                <td>专题名称</td>
                <td>状态</td>
                <td>创建时间</td>
                <td width="10%">操作</td>
            </tr>
            <foreach name="specialList" item="val">
                <tr align='center' bgcolor="#FFFFFF" valign="center">
                    <td>
                        <input name="id" type="checkbox" value="{$val.id}" class="np" />
                    </td>
					<td nowrap>{$val.id}</td>
					<td><?php if($val['image_url']) { ?><img src="{$val.image_url}?imageView2/2/w/180/h/101" width="180" height="101"><?php }else{ ?>
						<img src="/Html/img/defaultpic.gif"  width="180" height="101" alt=""><?php } ?></td>
                    <td><a href="{:U('manageSpecialContent')}?sid={$val.id}" data-id='{$val.id}' class='managespecialcontent'>{$val.name}</a></td>
                    <td><?php echo $val['status'] ? '使用中' : '已冻结' ?></td>
                    <td>{$val.create_time|date="Y-m-d H:i",###}</td>
                    <td>
						<a href="javascript:;" data-id='{$val.id}' class='editSpecial'>编辑</a>
						|
						<a href="{:U('getCommonList')}?sid={$val.id}" data-id='{$val.id}' class='addSpecial'>添加内容</a>
						|
						<a href="javascript:;" data-id='{$val.id}' class='delspecial'>删除</a>
                    </td>
                </tr>
            </foreach>
			<tr bgcolor="#ffffff">
			<td height="36" colspan="11">
				&nbsp;
				<a href="javascript:selAll()" class="btn btn-xs btn-info"><i class='glyphicon glyphicon-ok'></i> 全选</a>
				<a href="javascript:noSelAll()" class="btn btn-xs btn-info"><i class='glyphicon glyphicon-remove'></i> 取消</a>
				<!-- <a href="javascript:checkArc(0)" class="btn btn-xs btn-info">&nbsp;审核&nbsp;</a> -->
				<a href="javascript:;" id="delcategoryall" class="btn btn-xs btn-info"><i class="glyphicon glyphicon-trash"></i> 删除</a>
			</td>
			</tr>

    </form>
    <tr align="right" bgcolor="#F9FCEF">
        <td height="36" colspan="11" align="center">
            <div class='page'>{$showpage}</div>
        </td>
    </tr>
    </table>

      搜索表单
    <form name='form3' action='' method='get'>
    <input type='hidden' name='dopost' value='listArchives' />
    <table width='98%'  class='table' align="center" style="margin-top:8px">
        <tr bgcolor='#EEF4EA'>
            <td background='__PUBLIC__/images/wbg.gif' align='center'>
                <table border='0' cellpadding='0' cellspacing='0' height="32">
                    <tr>
                        <td nowrap>专题名称：</td>
                        <td width='130'>
                            <input type='text' name='name' value='' style='width:120px' />
                        </td>
                    <td>
                        <input name="imageField" type="image" src="__PUBLIC__/images/button_search.gif" width="60" height="22" border="0" class="np" />
                    </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </form>

<!-- 添加专题弹窗 -->
<div class="modal fade newspecialbox" tabindex="-1" Auth="dialog" aria-labelledby="add_user_jump" id='newspecialbox'>
  <div class="modal-dialog modal-sm" style="width:40%">

    <div class="modal-content">
		<div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">添加专题信息</h4>
	    </div>
		<form action="{:U('addSpecial')}" method="POST" class="form-horizontal" id="addcategoryform" style="padding:15px 0" enctype="multipart/form-data">
		<div class="form-group">
			<label for="name" class="col-sm-2 control-label">专题名称</label>
			<div class="col-sm-5">
				<input name="name" type="text" placeholder="请输专题目名称" datatype="*2-30" sucmsg=" " errormsg="用户名为2-30个字符" nullmsg="栏目名称必须填写" class="form-control" value="">
			</div>
			<div class="col-sm-5"></div>
		</div>

		<div class="form-group">
            <div class="fileList uploader-list"></div>
            <div class="filePicker newSpecial">选择封面图片</div>
            <input type="hidden" name="image_url" class="image_url">
		</div>

		<div class="add-error-message error item"></div>

		<div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-success">确定添加</button>
		      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		      <button type="button" class="btn btn-danger"  data-dismiss="modal">取消</button>
		    </div>
		  </div>
		</form>
    </div>
  </div>
</div>


<!-- 修改专题弹窗 -->
<div class="modal fade editspecialbox" tabindex="-1" Auth="dialog" aria-labelledby="add_user_jump" id='editspecialbox'>
  <div class="modal-dialog modal-sm" style="width:40%">

    <div class="modal-content">
		<div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">添加专题信息</h4>
	    </div>
		<form action="{:U('editSpecial')}" method="POST" class="form-horizontal" id="editSpecialForm" style="padding:15px 0">
		<input name='id' type="hidden" value=''>
		<div class="form-group">
			<label for="name" class="col-sm-2 control-label">专题名称</label>
			<div class="col-sm-5">
				<input name="name" type="text" placeholder="请输入栏目名称" datatype="*2-30" sucmsg=" " errormsg="用户名为2-30个字符" nullmsg="栏目名称必须填写" class="form-control" value="">
			</div>
			<div class="col-sm-5"></div>
		</div>

		<div class="form-group">
			<label for="status" class="col-sm-2 control-label">状态</label>
			<div class="col-sm-5">
				<select name="status" class="form-control" datatype="*" nullmsg='请选择状态' sucmsg=" ">
					<option value="1">使用中</option>
					<option value="0">已冻结</option>
				</select>
			</div>
			<div class="col-sm-5"></div>
		</div>


		<div class="form-group">
            <div class="fileList uploader-list"></div>
            <div class="filePicker addSpecial">选择封面图片</div>
            <input type="hidden" name="image_url" class="image_url">
		</div>

		<div class="add-error-message error item"></div>

		<div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-success">确定保存</button>
		      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		      <button type="button" class="btn btn-danger"  data-dismiss="modal">取消</button>
		    </div>
		  </div>
		</form>
    </div>
  </div>
</div>

    <style type="text/css">
        .editarticlebox{ z-index: 900 !important; }
        .modal-backdrop{z-index: 800 !important; }
    </style>
<script>
	$('.delspecial').click(function(){
		if(confirm('是否确定删除此栏目？')){
			var obj=this;
			$.get('{:U("ajaxDelSpecial")}?id='+$(obj).data('id'),function(data){
				if(data.status==1){
					$(obj).parents('tr').remove();
				}
			})
		}
	})

	$('#delspecialall').click(function(){
		if(confirm('是否确定删除？')){
			var id=$('[name=id]:checked').map(function(){
				return $(this).val();
			}).get().join()

			$.get('{:U("ajaxDelSpecial")}?id='+id,function(data){
				if(data.status==1){
					$('[name=id]:checked').parents('tr').remove();
				}
			})
		}
	})


	$('.editSpecial').click(function(){
		$('#editspecialbox form').get(0).reset();
		$.get("{:U('ajaxGetSpecialInfo')}?id="+$(this).data('id'),function(data){
  			if(data!=0){
  				$("#editspecialbox [name=id]").val(data.id);
  				$("#editspecialbox [name=name]").val(data.name);
                $("#editspecialbox [name=status]").val(data.status);
                $("#editspecialbox [name=image_url]").val(data.image_url);
  			}
  		})
		$('#editspecialbox').modal('show');
	})

    $('#editspecialbox,#newspecialbox').on('hidden.bs.modal', function (e) {
        $(this).find("input,select").val("");
        $(".fileList").empty();
    });

	function selAll(){
		$('[name=id]').each(function(){
			this.checked=true;
		})
	}
	function noSelAll(){
		$('[name=id]').each(function(){
			this.checked=false;
		})
	}

	$('.addcategorycontent').click(function () {

		$('#addcategorycontentbox').modal('show');
	})


    var uploader = WebUploader.create({
        auto: false,
        swf: '__PUBLIC__/webUploader/Uploader.swf',
        server: 'http://upload.qiniu.com',
        pick: '.filePicker',
        thumb:{
            width: 400,
            height:225,
            crop: false,
        },
        formData:{
            token:"{$uploadToken}"
        },
        fileNumLimit:1,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    uploader.on('beforeFileQueued',function(){
        $(".modal:visible .btn-success").attr('type','button').prop('disabled',false);
        $(".fileList").empty();
        uploader.reset();
    });
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '</div>'
                ),
                $img = $li.find('img');

        $('.modal:visible .fileList').append( $li );

        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        });
    });

    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
        }
        $percent.css( 'width', percentage * 100 + '%' );
    });


    uploader.on( 'uploadSuccess', function( file,response ) {
        $( '#'+file.id ).addClass('upload-state-done');
        $(".modal:visible .image_url").val("{:C('IMAGE_HOST')}"+response.key);
        $(".modal:visible .btn-success").attr('type','submit').prop('disabled',false);
        $(".modal:visible form").submit();
    });
    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
                $error = $li.find('div.error');
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }
        $error.text('上传失败');
    });


    uploader.on( 'uploadComplete', function( file ) {
        $(".modal:visible .btn-success").prop('disabled',false);
        $( '#'+file.id ).find('.progress').remove();
    });

    $(".btn-success").click(function(){
        if($(this).is(":button")){
            $(".modal:visible .btn-success").attr('type','submit').prop('disabled',true);
            uploader.upload();
        }

    })

</script>
</block>